<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>单车定位查询</title>
    <!--引入Layui-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/brokenBikeSearch.css">
</head>
<body>
<div class="layui-container">
    <ul class="flow-default" id="streamLoad_div"></ul>
</div>
<script src="/layui/layui.js"></script>
<script>
    //Demo
    layui.use(['form', 'table', 'layer', 'flow'], function () {
        var form = layui.form,
            layer = layui.layer,
            flow = layui.flow,
            $ = layui.jquery;
        //表格数据渲染
        flow.load({
            elem: '#streamLoad_div' //流加载容器
            // ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            , end: ""
            , done: function (page, next) { //执行下一页的回调
                //模拟数据插入
                setTimeout(function () {
                    var lis = [];
                    //发送数据请求-加载全部
                    $.ajax({
                        url: "http://localhost:8011/brokenbike/select/all",
                        method: "GET",
                        success: function (result) {
                            if (result && result.code == 1) {
                                let datalis = []
                                let day1
                                const nowdate = new Date();
                                result.data.forEach(i => {
                                    let noUseData = new Date(i.date)
                                    let cha = Math.abs(noUseData.getTime() - nowdate.getTime())
                                    let days = parseInt(cha / (24 * 60 * 60 * 1000))
                                    let hours = parseInt(cha % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))
                                    let mins =  parseInt(cha % (60 * 60 * 1000) / (60 * 1000))
                                    if (days) {
                                        day1 = `${days}天 ${hours}时 ${mins}分`
                                    } else if (hours) {
                                        day1= `${hours}时 ${mins}分`
                                    } else {
                                        day1= `${mins}分`
                                    }
                                   i.day1 = day1

                                    if (days >180) {
                                        datalis.push(i)
                                    }
                                });
                                for (var i = 0; i < datalis.length; i++) {
                                    // lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
                                    let disabledVal = datalis[i].status == 0 ? false : true;
                                    lis.push(' <li>\n' +
                                        '            <div class="title">\n' +
                                        '                <div>ID:<span>' + datalis[i].id + '</span></div>\n' +
                                        '                <div>上次使用时间:<span>' + datalis[i].date + '</span></div>\n' +
                                        '            </div>\n' +
                                        '            <hr/>\n' +
                                        '            <div class="body">\n' +
                                        '                <div class="body-img"><img src="data:image/jpeg;base64,' + datalis[i].photo + '"></div>\n' +
                                        '                <div class="body-right">\n' +
                                        '                    <div>所在地址：<text>' + datalis[i].address + '</text></div>\n' +
                                        '                    <div>单车位置：<text>' + datalis[i].location + '</text></div>\n' +
                                        '                    <div>未使用时长：<text>' + datalis[i].day1 + '</text></div>\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '        </li>');
                                }
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < 1); //假设总页数为 10
                                //为所有li中的button绑定事件
                                let container = document.querySelector("#streamLoad_div");
                                let btnList = container.querySelectorAll("#dealbtn");
                                console.log(btnList)
                                //绑定点击事件
                                for (let i = 0; i < btnList.length; i++) {
                                    btnList[i].onclick = function (e) {
                                        console.log(e)
                                        let bid = this.getAttribute("id_no");
                                        //发送请求-处理损坏单车
                                        $.ajax({
                                            url: "http://localhost:8011/brokenbike/update",
                                            method: "GET",
                                            data: {
                                                id: bid,
                                            },
                                            success: function (res) {
                                                if (res && res.code == 1) {
                                                    layer.msg("已处理,刷新后可查询状态");
                                                } else {
                                                    layer.msg("处理失败,请稍后再试");
                                                }
                                            }
                                        })
                                    }
                                }
                            } else {
                                layer.msg("加载失败!")
                            }
                        }
                    })
                }, 500);
            }
        });
    });
</script>
</body>
</html>
